<script setup>
import { ref } from 'vue'
const isOpen = ref(true)
const closeUser = () => {
  isOpen.value = false
}
const openUser = () => {
  isOpen.value = true
}
const audio = ref(50)
</script>

<template>
  <div class="number-user">
    <div class="tips">
      你好，有什么我可以帮助你的？
    </div>
    <div class="number-box">
      <div class="number-wrapper">
      </div>
      <div class="number-user-audio">
        <n-slider v-model:value="audio" :step="1" />
      </div>
    </div>
    <div class="btn-box open" v-if="isOpen" @click="closeUser">
      关闭数字人
    </div>
    <div class="btn-box close" v-if="!isOpen" @click="openUser">
      开启数字人
    </div>
  </div>

</template>

<style scoped lang="scss">
.dark {
  .number-user {
    background: #1A1D22;
    border-radius: 8px;
    .btn-box {
      &.open {
        color: #ffffff;
        background-image: url("~@/assets/numberUser/btn-bg.png");
      }
      &.close {
        color: #63E2B7;
        background-image: url("~@/assets/firend/group.png");
      }
    }
    .tips {
      color: #ffffff;
    }
    .number-box {
      background: #24272E;
    }
    .number-wrapper {
      background: #1A1D22;
    }
  }
}
.number-user {
  height: calc(100% - 16px);
  padding: 16px;
  margin-top: 16px;
  .btn-box {
    margin-top: 28px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    cursor: pointer;
  }
  .tips {
    padding-top: 40px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .number-box {
    height: 214px;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    .number-user-audio {
      padding: 12px 0;
    }
    .number-wrapper {
      border-radius: 10px;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
